iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 23
0
自我挑戰組

如何成為工程師? (從工地到前端工程師)系列 第 23

[Day 23] Vue 的狀態管理器, Vuex

  • 分享至 

  • xImage
  •  

vuex 是 vue 的狀態管理器, 就像redux , mobx 是react 的狀態管理器。 其實我覺得vuex 跟react 的 mobx 比較像。 Vuex 比 redux 更容易上手, 安裝也簡單。 然後也不需要middleware 處理非同步Action(saga, thunk)。這裡我不講什麼是狀態管理器, 我在介紹redux那一篇我有討論過了 連結 最後 vuex 是vue 官方的狀態管理器, 所以他會在官方調試工具(devtool), 方便我們Debug

以下是vuex的流程:
vuex flow
vuex flow

Vuex 的核心

state: 一個管理我們所有應用程式的狀態,
mutations: 更改Vuex的store中的狀態的唯一方法是提交mutation
actions:Action 提交的是mutation,而不是直接變更狀態。
Action 可以包含任意異步操作。
getters: store 中定義“getter”(可以認為是store 的計算屬性)

Demo

vuex todo

在我的vue component 裡面我在@click 觸發addTodo action, 然後把this.inputTodo 傳到我的store addTodo action 裡面。

//App.js

...
 <button @click="addTodo">Add Todo</button>
...
addTodo () {
  this.$store.dispatch('addTodo', this.inputTodo)
  this.inputTodo=''
}
// store.js
// 我的state存放我的todo object
export const state = {
  todos: [
    {
      id: 1,
      text: "learn vue"
    },
    {
      id: 2,
      text: "learn css"
    }
  ]
}

//這裡有addTodo, editTodo, deleteTodo mutation, 這些可以改變state的質
export const mutations = {
  addTodo (state, payload) {
    state.todos.push({
      id: state.todos.length+1,
      text: payload
    })
  },
  editTodo (state, payload) {
    payload.todo.text = payload.value
  },
  deleteTodo (state, payload) {
    state.todos.splice(state.todos.indexOf(payload), 1)
  }
}

//這些action 決定要commit 那些 mutation, 還有傳payload(參數)進去
export const actions = {
  addTodo (context, payload) {
    context.commit('addTodo', payload)
  },
  deleteTodo (context, payload) {
    context.commit('deleteTodo', payload)
  },
  editTodo (context, payload) {
    context.commit('editTodo', payload)
  }
}

//這裡是getters 就是算好的質。
export const getters = {
  todos: state => state.todos
}

參考連結


上一篇
[Day 22] 工作專案換Vue, 我也學一下
下一篇
[Day 24] Vue-i18n, 如何讓你的vue支援多語言
系列文
如何成為工程師? (從工地到前端工程師)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言